<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>数码时钟</title>
    <style>
        #center{
            text-align: center;
            line-height: 100%;
        }
    </style>
</head>
<body>
    <div id="center">
        <div>
            <img src="../ExternalLibrary/img/clock_0.png" alt="" id="year_0">
            <img src="../ExternalLibrary/img/clock_0.png" alt="" id="year_1">
            <img src="../ExternalLibrary/img/clock_0.png" alt="" id="year_2">
            <img src="../ExternalLibrary/img/clock_0.png" alt="" id="year_3">
            <img src="../ExternalLibrary/img/clock_year.png" alt="">
            <img src="../ExternalLibrary/img/clock_0.png" alt="" id="month_0">
            <img src="../ExternalLibrary/img/clock_0.png" alt="" id="month_1">
            <img src="../ExternalLibrary/img/clock_month.png" alt="">
            <img src="../ExternalLibrary/img/clock_0.png" alt="" id="date_0">
            <img src="../ExternalLibrary/img/clock_0.png" alt="" id="date_1">
            <img src="../ExternalLibrary/img/clock_week.png" alt="">
            <img src="../ExternalLibrary/img/clock_one.png" alt="" id="week_1">
        </div>
        <div>
            <img src="../ExternalLibrary/img/clock_0.png" alt="">
            <img src="../ExternalLibrary/img/clock_0.png" alt="">
            <img src="../ExternalLibrary/img/clock_sign.png" alt="">
            <img src="../ExternalLibrary/img/clock_0.png" alt="">
            <img src="../ExternalLibrary/img/clock_0.png" alt="">
            <img src="../ExternalLibrary/img/clock_sign.png" alt="">
            <img src="../ExternalLibrary/img/clock_0.png" alt="">
            <img src="../ExternalLibrary/img/clock_0.png" alt="">
        </div>
    </div>
</body>
<script>
    window.onload = ()=>{
        let yearInterval = setInterval(()=>{//setInterval()只执行一次的原因,[如果你记不起来了请百度]
            let time = new Date();
            let year = time.getFullYear()+"";
            renderPic(year,"year_");
        },1000);

        let monthInterval = setInterval(() => {
            let time = new Date();
            let month = time.getMonth()+1+"";
            renderPic(month,"month_");
        }, 1000);

        let dateInterval = setInterval(()=>{
            let time = new Date();
            let date = time.getDate()+"";
            renderPic(date,"date_");
        },1000);

        setInterval(()=>{
            let time = new Date();
            let week = time.getDay()+"";
            renderPic(week,"week_");
        },1000);

        function renderPic(time ,id){
            let timeArr = time.split("");
            if(timeArr.length==1){
                document.getElementById(id+"1").src="../ExternalLibrary/img/clock_"+timeArr[0]+".png";
                return;
            }

            for(let index=0;index<timeArr.length;index++){
                document.getElementById(id+index).src="../ExternalLibrary/img/clock_"+timeArr[index]+".png";
            }
        }
    }
</script>
</html>